<template>
  <div class="box">
    <h1>组件间通信: custom_event</h1>
    <!-- 元素绑定原生事件 -->
    <!-- <button @click="clickHandler($event)">按钮1</button> -->
    <button @click="clickHandler">按钮1</button>

    <hr>
    <!-- 元素绑定自定义事件 -->

    <button @xxx="xxxHandler">按钮2</button>

    <hr>
    <!-- 组件绑定原生事件 -->

    <Event1 @click="event1ClickHandler"></Event1>

    <hr>
    <!-- 组件绑定自定义事件 -->
    <Event2 @xxx="event2ClickHandler"></Event2>



  </div>
</template>

<script lang="ts" setup>
// 事件
// 元素绑定事件
//  - 绑定原生事件
//      - 事件类型 - click,mouseenter,mouseleave... 事件的类型都是系统内置好的,是有限个数
//      - 触发机制 - 例如: click,当点击按钮的时候,此时浏览器触发事件
//  - 绑定自定义事件
//      - 没有意义,没有相关的事件类型和触发机制
// 组件绑定事件
//  - 绑定原生事件
//      vue2: 绑定的原生事件会被理解成自定义事件,如果想变成原生事件,需要适用.native修饰
//      vue3: 1. 绑定的原生事件,会直接绑定到子组件的根标签上,直接变成了一个原生事件, .native 被移出了
//            2. vue3当中子组件可以没有根标签:
//                当子组件没有根标签的时候,会报警告
//                警告的意思是:这个click事件要么写上根标签变成原生事件,要么自定义事件触发
//            3. 只要在子组件当中使用 defineEmits 接收过的事件,都会变成自定义事件
//                不管这个事件是原生还是自定义的
//  - 绑定自定义事件
//      自定义事件的接收使用 defineEmits
//      没有加TS使用defineEmits:
//          defineEmits(['xxx'])
//          defineEmits 是一个函数
//          功能: 用来接收绑定在组件的事件
//          参数: 数组
//                数组中放的是绑定在组件上的事件
//          返回值: 返回一个函数,这个对象用来触发事件
//          注意: 自定义事件是我们自己触发的,参数需要我们自己传,没有事件对象
//      加TS使用defineEmits:
//          const emit = defineEmits<{
//            (e: 'xxx', str: string): void
//          }>()
//          defineEmits 是一个函数,返回值是一个函数 emit
//          emit在调用的时候,加TS在限制调用时,传的参数
//          调用:
//          emit('xxx', '我爱你')
//          参数一: 是事件类型
//          参数二: 是自定义事件传的参数
// -------------------------------------------------------------
// 关于参数:
//    原生事件的参数是事件对象
//    自定义事件的参数是我们自己传递
//    $event 之前怎么使用,现在怎么使用(和之前的用法一摸一样)
// 注意:
//    原生事件触发有事件对象,事件对象作为参数是有类型的,类型我们这里用的是 Event
//        关于Event类型说明:
//        Event类型是系统内容的对象,需要记吗?
//        不需要,记住一两个即可,然后使用`ctrl + 鼠标左键`点击到系统的TS类型声明文件中去
//        在这个文件中,大概5560行左右有所有的系统内容类型,
//        找到当前的事件,把当前事件的类型拿出来放到我们的代码中即可
//        发现click事件的事件对象是 MouseEvent 类型
//    自定义事件,自定义事件的参数,类型自己定义,参数是自己传递的,所以需要自己定义
import Event1 from './Event1.vue';
import Event2 from './Event2.vue';

const clickHandler = (e: MouseEvent) => {
  console.log('触发了原生事件', e);
}
const xxxHandler = () => {
  console.log('触发了xxx事件');
}
const event1ClickHandler = (e) => {
  console.log('触发了Event1的click事件', e);
}
const event2ClickHandler = (str: string) => {
  console.log('触发了Event2的xxx事件');
}






</script>
